/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div class="content">
    <!-- 处理动作 -->
    <!-- <div class="typeBox mar-bot-12">
      <mt-actionsheet
        :actions="typesAction"
        v-model="sheetVisible">
      </mt-actionsheet>
      <div class="select" ref="btn16" @click="showSelect" v-if="typesData && typesData.length>0">
        <div class="label requied">处理动作</div>
        <div v-bind:class="{value: true, default: !isTypeSelected}" >
          <span class="text">{{getValue()}}</span>
          <i class="iconfont icon-close-cir default" v-on:click.stop="clearSelect" v-show="isTypeSelected"></i>
          <i class="iconfont icon-previewright default"  v-show="!isTypeSelected"></i>
        </div>
      </div>
    </div>-->
    <!-- <div class="remarkBox mar-bot-12" v-html="data.flows.inputs"></div> -->
    <TemplateForm :data="data"></TemplateForm>
    <!-- 处理说明 -->
    <div class="remarkBox mar-bot-12">
      <div class="remark">
        <div class="title">
          <div class="label">
            <i class="iconfont icon-yijian1"></i>处理意见
          </div>
        </div>
        <div class="textarea-control">
          <textarea v-model="remarkData" placeholder="请输入处理意见" rows="3" style></textarea>
        </div>
      </div>
    </div>
    <!-- 上传文件 -->
    <div class="uploadBox mar-bot-12">
      <div class="upload">
        <div class="title">
          <div class="label">
            <i class="iconfont icon-shangchuan2"></i>上传文件
          </div>
        </div>
        <div class="upload-control">
          <UpLoad :changeUpdateFileIds="changeUpdateFileIds"></UpLoad>
        </div>
      </div>
    </div>
    <!-- 执行人签名 -->
    <div class="signatureBox mar-bot-12" v-if="signatureIsRequied">
      <div class="select" @click="handlerCanvas" style="padding: 0 10px;">
        <div class="label" style="margin: 5px 0;">
          <i class="iconfont icon-qianzi"></i>签名
        </div>
        <div class="value" style="height: 36px;">
          <img :class="{'horiImg': horizontal === 0}" :src="signatureData" alt>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Actionsheet, Toast, Indicator } from "mint-ui";
import { reqSubmitAction } from "../../api/index.js";
import UpLoad from "./UpLoad";
import TemplateForm from "./TemplateForm";

export default {
  props: {
    data: Object,
    showCanvas: {
      type: Function
    },
    initDetailData: Function,
    signatureData: String,
    typesData: Array,
    horizontal: Number
  },
  data() {
    return {
      sheetVisible: false,
      // ], //处理动作的类型
      selectedType: null, //选中的处理动作
      remarkData: "",
      updateFileIds: []
    };
  },
  watch: {
    selectedType: function(data) {
      console.log("watch selectedType", data);
    }
  },
  computed: {
    // typesAction: function() {
    //   const that = this;
    //   const types = this.typesData;
    //   let result = [];
    //   types.map(item => {
    //     result.push({
    //       name: item.name,
    //       method: () => that.pickTypes(item.action)
    //     });
    //   });
    //   return result;
    // },
    // 处理动作是否选择
    // isTypeSelected: function() {
    //   if (!this.selectedType && this.selectedType != 0) {
    //     return false;
    //   } else {
    //     return true;
    //   }
    // },
    // remarkIsRequied: function() {
    //   return this.selectedType === "reject" ? "true" : false;
    // },
    signatureIsRequied: function() {
      // return

      return this.data.flows.propertys && this.data.flows.propertys.signAble;
    }
  },
  methods: {
    // 显示处理动作选项
    showSelect() {
      this.sheetVisible = true;
    },
    // 选择处理动作
    pickTypes(data) {
      console.log("处理动作", data);
      this.selectedType = data;
    },
    // 清除选中的动作
    clearSelect() {
      this.selectedType = null;
    },
    // 显示画板
    handlerCanvas() {
      this.showCanvas();
    },
    getValue() {
      const v = this.selectedType,
        t = this.typesData;
      if (!v && v != 0) {
        return "请选择";
      } else {
        return t.filter(item => item.action == v)[0].name;
      }
    },
    // 提交form动作,在父组件中触发
    async submitAction(action) {
      console.log("action", action);
      console.log("提交动作!");

      if (action === "reject" && !this.remarkData) {
        Toast("处理意见必须填写!");
        return;
      }
      // signAble为true显示,当处理动作为save时必须签名
      if (
        this.signatureIsRequied &&
        this.selectedType === "save" &&
        !this.signatureData
      ) {
        Toast("请签名!");
        return;
      }
      Indicator.open({
        spinnerType: "triple-bounce",
        text: "提交中.."
      });
      let result = {
        sano: this.data.flows.sano,
        isCheckAble: this.data.flows.isCheckAble,
        activityCode: this.data.flows.activityCode,
        activityId: this.data.flows.activityId,
        activityName: this.data.flows.activityName,
        rejectType: this.data.flows.rejectType,
        taskId: this.data.flows.taskId,
        action: action,
        explain: this.remarkData,
        signimg: this.signatureData, //签名文件, 0竖屏, 1横屏
        horizontal: this.horizontal, //是否是竖屏
        attachments: this.updateFileIds, //上传的文件id
        create_time: new Date(),
        moduleno: this.data.moduleNo,
        rejectToActivity: this.data.flows.rejectToActivity,
        rejectToUser: this.data.flows.rejectToUser,
      };
      const data = await reqSubmitAction(result);
      Indicator.close();
      if (data.code == 1) {
        Toast("提交成功!");
        this.initDetailData();
      } else {
        Toast("提交失败!");
      }
    },
    // 改变上传的文件id
    changeUpdateFileIds(data) {
      this.updateFileIds = data;
    }
  },
  mounted() {},
  components: {
    "mt-actionsheet": Actionsheet,
    UpLoad,
    TemplateForm
  }
};
</script>

<style lang='less' scoped>
@import "../../util/themt.less";
// 公共部分
.title {
  background: #fff;
  display: flex;
  padding: 5px 10px;
  font-size: 14px;
  line-height: 26px;
}
// .requied:before {
//   display: inline-block;
//   margin-right: 2px;
//   content: "*";
//   font-family: SimSun;
//   line-height: 1;
//   font-size: 12px;
//   color: #f5222d;
// }

// 分隔显示
.mar-bot-12 {
  margin-bottom: 8px;
  background: #fff;
}
// 处理类型
.typeBox,
.remarkBox,
.uploadBox,
.signatureBox {
  border-radius: 4px;
  overflow: hidden;
  .label {
    font-size: 15px;
    line-height: 30px;
    font-weight: 500;
    color: @font-regular;
    i {
      margin-right: 3px;
    }
  }
  .boxShadow();
  .value {
    position: relative;
    img {
      width: 80px;
      height: 36px;
    }
    .horiImg {
      width: 36px;
      height: 80px;
      transform: rotate(270deg);
      position: absolute;
      top: -22px;
      right: 20px;
    }
  }
}
.select {
  background: #fff;
  display: flex;
  padding: 5px 10px;
  font-size: 14px;
  line-height: 26px;
}
.label {
  flex: 1;
  text-align: left;
}

.value {
  flex: 1;
  text-align: right;
}
.default {
  color: @gray;
}
// 处理意见
.remark {
  width: 100%;
  font-size: 14px;
  .textarea-control {
    background: #fff;
    padding: 0 10px;
    textarea {
      color: @font-regular;
      font-size: 14px;
      line-height: 25.5px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      width: 100%;
      padding: 0;
      border: 0;
      background-color: transparent;
      overflow: visible;
      display: block;
      resize: none;
      word-break: break-all;
      word-wrap: break-word;
    }
  }
}
// 动画
/* animation例子 */
.animation-in {
  animation: animation 280ms ease forwards;
}
.animation-out {
  animation: animation 280ms ease reverse;
}
</style>
